<template>
    <div>
        <span class="title1">房源基建 /</span>
        <span class="title2">园区统计</span>
        <div class="card-container">
            <el-row>
                <el-col :span="12" class="chart-col">
                    <el-card>
                        <span>东园</span>
                        <div id="pieChart1" style="width: 100%; height: 400px;"></div>
                    </el-card>
                </el-col>
                <el-col :span="1" class="divider"></el-col>
                <el-col :span="11" class="chart-col">
                    <el-card>
                        <span>&nbsp;</span>
                        <div id="pieChart2" style="width: 100%; height: 400px;"></div>
                    </el-card>
                </el-col>
            </el-row>
            <el-row class="mt-20"> <!-- 添加 mt-20 类来增加上下卡片之间的间距 -->
                <el-col :span="24">
                    <el-card>
                        <span>各专业入住人数</span>
                        <div ref="chartContainer" style="width: 100%; height: 400px;"></div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script type="module">
import {initPieChart} from './PieChart.js'
import {initBarChart} from './BarChart.js'
import {statStudentByRole, statStudentByMajor, statbed} from '../../../../api/fifth'

export default {
  name: 'Second',
  data () {
    return {
      chartData: [], // 用于存储转换后的图表数据
      myChart: null // 用于保存echarts实例的引用
    }
  },
  async mounted () {
    // 第一个图表的数据
    /* const chartData1 = [
      {value: 1048, name: '本科生'},
      {value: 735, name: '硕士研究生'},
      {value: 580, name: '博士研究生'},
      {value: 484, name: '其他'}
    ] */
    // 从表中统计数据
    // 不要在这里操作请求内部的变量
    // axios是异步请求
    statStudentByRole().then(response => {
      // 注意这里我们是从response.data中访问数组
      if (Array.isArray(response.data)) {
        const chartData = response.data.map(item => ({
          value: item.number,
          name: item.type
        }))
        initPieChart('pieChart1', chartData, '入住学生总数')
      } else {
        console.error('Expected an array in response.data, but got:', response.data)
      }
    }).catch(error => {
      console.error('Error fetching chart data:', error)
    })
    // 第二个图表的数据
    try {
      const response = await statbed() // 调用statbed接口
      if (response.status && response.code === 0) {
        // 处理响应数据，转换为图表所需格式
        this.chartData = response.data.map(item => ({
          value: item.number,
          name: item.type
        }))

        // 现在chartData已经准备好，可以调用initPieChart方法来生成图表
        initPieChart('pieChart2', this.chartData, '床位使用情况')
      } else {
        // 处理错误情况，比如状态码不是0
        console.error('Failed to fetch bed usage data:', response.message || 'Unknown error')
      }
    } catch (error) {
      // 处理请求过程中的错误
      console.error('Error fetching bed usage data:', error)
    }

    // 初始化第一个图表
    // initPieChart('pieChart1', chartData1, '入住学生总数')

    // 初始化第二个图表
    // initPieChart('pieChart2', chartData2, '床位总数')

    // 先前未初始化时，条形统计图内为默认数据
    // const chartData = {}

    statStudentByMajor().then(response => {
      if (Array.isArray(response.data)) {
        // 提取出所有专业的名称（type）和对应的数值（number）
        const xAxisData = response.data.map(item => item.type) // 用于xAxis的data
        const seriesData = response.data.map(item => item.number) // 用于series的data
        console.log(xAxisData)
        // 创建一个包含xAxis和series配置的option对象
        const option = {
          xAxis: {
            type: 'category',
            data: xAxisData
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: seriesData,
              type: 'bar',
              label: {
                show: true,
                position: 'top',
                valueAnimation: true,
                formatter: '{c}'
              }
            }
          ]
        }
        this.myChart = initBarChart(this.$refs.chartContainer, option)
      } else {
        console.error('Expected an array in response.data, but got:', response.data)
      }
    }).catch(error => {
      console.error('Error fetching chart data:', error)
    })

    // 注意：这里假设initBarChart函数已经准备好接收一个配置对象，并据此初始化图表
  },

  beforeDestroy () {
    // 组件销毁前，确保销毁echarts实例以避免内存泄漏
    if (this.myChart) {
      this.myChart.dispose()
    }
  }
}
</script>

<style scoped>
.title1 {
    color: #808080;
    font-size: 16px;
    font-face: Source Han Sans CN;
    font-weight: 700;
    letter-spacing: 0;
    padding: 16px;
    line-height: 60px;
}

.title2 {
    color: #1a1a1a;
    font-size: 16px;
    font-face: Source Han Sans CN;
    font-weight: 700;
    letter-spacing: 0;
}

.card-container {
    display: flex;
    flex-direction: column;
    padding-left: 20px;
    padding-right: 20px;
}

.chart-col {
    padding-right: 10px;
}

.chart-col:last-child {
    padding-right: 0px;
}

.divider {
    background-color: #ccc; /* 灰色背景 */
    width: 1px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mt-20 {
    margin-top: 20px; /* 增加上下卡片之间的间距 */
}
</style>
